<template>
    <div>

        <div class="top-view">
            <el-button lass="main-btn" size="small" type="primary" @click="onAdd" v-if="userInfo.ID == datas.headId">新建联系人</el-button>
        </div>

        <el-table
                header-cell-class-name="table-header"
                border
                :data="tableData"
        >
            <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true"/>
            <el-table-column prop="linkmanName" label="联系人姓名" align="center" :show-overflow-tooltip="true"/>
            <el-table-column prop="linkmanPost" label="职位" align="center" :show-overflow-tooltip="true"/>
            <el-table-column prop="tel" label="联系电话" align="center" :show-overflow-tooltip="true"/>
            <el-table-column prop="updatedAt" label="创建时间" align="center" :show-overflow-tooltip="true">
                <template #default="{row}">
                    {{ dateFormat("yyyy-mm-dd HH:MM:SS",row.createdAt) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="{row}">
                    <template v-if="userInfo.ID == datas.headId">
                        <el-button
                                type="text"
                                @click="onEdit(row)"
                        >编辑</el-button>
                        <el-button
                                type="text"
                                @click="onDelete(row)"
                        >删除</el-button>
                    </template>

                </template>
            </el-table-column>

        </el-table>

        <Pagination
                v-model:page="formData.page"
                v-model:limit="formData.pageSize"
                style="display: flex; justify-content: flex-end"
                :total="total"
                @pagination="getList"
        />

        <addContact ref="addContact" :id="datas.objectId" :type="datas.customerType" @success="getList"/>
    </div>
</template>

<script>
    import {crmStore} from "../../../../store";
    import { defineComponent, defineAsyncComponent, reactive, toRefs, ref, inject, getCurrentInstance, onMounted, watch } from 'vue'
    export default defineComponent({
        name: "contactView",
        components:{
            addContact:defineAsyncComponent(()=>import('./addContact.vue'))
        },
        props:{
            datas:{
                type:Object,
                default:{}
            }
        },
        setup(props){
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const userInfo = crmStore.getters['user/userInfo']

            var data = reactive({
                tableData:[],
                formData:{
                    page:1,
                    pageSize:20,
                },
                total:0,
                addContact:null,
            })

            watch(
                () => props.datas,
                (newV,oldV) => {
                    if (newV && newV.id){
                        getList()
                    }
                },{deep:true,immediate:true}
            )

            const onAdd = () => {
                data.addContact.open()
            }

            const onEdit = (row) => {
                data.addContact.open(row)
            }

            const onDelete = (row) => {
                currentInstance.proxy
                    .alertBox({
                        message: '删除数据后不可恢复,确定删除？',
                    })
                    .then(() => {
                        api.terminal.CONTACT_DELETE(row.id).then((res) => {
                            if (res.code) {
                                currentInstance.proxy.customMessage({
                                    type: 'error',
                                    message: res.msg,
                                })
                            } else {
                                currentInstance.proxy.customMessage({
                                    type: 'success',
                                    message: '删除成功',
                                })
                                getList()
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const getList = () => {

                let a = {
                    relationId: Number(props.datas.objectId),
                    modelType: '',
                    pageSize: data.formData.pageSize,
                    page: data.formData.page,
                }
                if (props.datas.customerType == 1){
                    a.modelType = 'agent'
                }else if (props.datas.customerType == 2){
                    a.modelType = 'seller'
                }else if (props.datas.customerType == 3){
                    a.modelType = 'terminal'
                }
                api.terminal.CONTACT_LIST(a).then((res) => {
                    if (res.code === 0) {

                        data.tableData = res.data.list || []
                        data.total = res.data.total
                        console.log('data.tableData == ', data.tableData)
                    }
                })
            }

            onMounted(() => {

            })

            return{
                ...toRefs(data),
                userInfo,

                onAdd,
                onEdit,
                onDelete,
                getList,
            }
        }
    })
</script>

<style lang="scss" scoped>

    .top-view{
        margin-bottom: 10px;
    }
</style>
